<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性:[微调：文字或者图片]
			 margin使用问题1：自适应居中：建议使用div 套块元素、行块内元素、行内元素
			       使用问题2：行元素，加上下以及右左的外边距*/
			img{
				border: 1px solid red;
				/* margin:1个属性值 顺时针：上  右 下 左 */
				margin: 200px;
				/* margin:2个属性值 顺时针 ：上下 右左 */
				margin: 10px 200px;
				/* 常用：盒子自适应居中------失效 
				   行内块  可以设置宽高 在一行内显示、无法居中
				   margin1使用问题1 自适应居中 必须设置宽高*/
				
				margin: 0 auto;
				/* margin:3个属性值 顺时针 上 右左 下 */
				mar gin: 100px 200px 300px;
				/* margin:3个属性值 顺时针 上 右 下 左*/
				mar gin: 100px 200px 300px 400px;
				
			}
			h1{
				/* 块元素：可以设置高宽、不在一行内显示、无法居中、内置文本
				 text-align: center;
				 */
				/* 常用：盒子自适应居中 */
				width: 100%;
				border: 1px solid red;
				 text-align: center;
				 margin: 100px 200px;
			}
			span{
				/* 行元素  不可以设置宽高、在一行显示、无法剧中，内置文本
				 text-align:center
				 */
				/* 常用：盒子自适应居中 */
				width: 100%;
				border: 1px solid red;
				margin: 100px 200px;
			}
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 0 auto;
				
				
			}
			
		</style>
	</head>
	<body>
		<div></div>
		<!-- 框模型、盒子模型、四个部分组成、所有元素存在于框模型中
		                     外边距：边框以外四周、叫做外边距
							 边框“---
							 内边距：边距以内 与内容 之间距离 叫做内边距
							 内容：块、行  行内元素本身宽高
							  所有元素都存在于框模型中-->
		<h1>块级元素</h1>
		<img src="img/圣诞.png" width="300px" height="300px" alt="圣诞" >
		<span>行内元素：圣诞</span>
	</body>
</html>